<template>
  <div class="search">
    <Row>
      <Col>
        <Card>
          <Row style="margin-bottom:20px;">
            <Button @click="getList" icon="md-refresh" style="margin-right:10px">刷新</Button>
          </Row>

          <Row>
            <Table :loading="loading" border :columns="commodityColumns" :data="commodityData" ref="table" sortable="custom" @on-sort-change="changeSort"></Table>
          </Row>

          <Row type="flex" justify="end" class="page">
            <Page :current="searchForm.pageNumber" :total="pageTotal" :page-size="searchForm.pageSize" @on-change="changePage" @on-page-size-change="changePageSize" :page-size-opts="[10,20,50]" size="small" show-total show-elevator show-sizer></Page>
          </Row>
        </Card>
      </Col>
    </Row>

    <Modal title="审核" v-model="modalVisible" :mask-closable='false' :width="600">
      <Form ref="form" :model="form" :label-width="100" :rules="formValidate" >
        <FormItem label="审核意见" prop="content">
          <Input v-model="form.content" style="width: 100%" type="textarea" />
        </FormItem>
        <FormItem label="审核状态" prop="type">
          <Select v-model="form.type" style="width:100%">
            <Option value="0">不同意</Option>
            <Option value="1">同意</Option>
          </Select>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button type="text" @click="modalVisible=false">取消</Button>
        <Button type="primary" :loading="submitLoading" @click="handleSubmit">提交</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pageTotal: 0,
      loading: false,
      form: {
        id: "",
        content: "",
        type: ""
      },
      formValidate: {
        content: [{ required: true, message: "不能为空", trigger: "blur" }],
        type: [{ required: true, message: "不能为空", trigger: "change" }]
      },
      modalVisible: false, //模态框的显示隐藏
      commodityData: [],
      //商品显示
      commodityColumns: [
        {
          type: "index",
          width: 60,
          align: "center",
          fixed: "left"
        },
        {
          title: "订单号",
          key: "orderNum"
        },
        {
          title: "支付类型",
          key: "payType"
        },  
        {
          title: "购买人",
          key: "buyerName"
        },      
        {
          title: "购买人手机号",
          key: "buyerMobile"
        },
        {
          title: "购买时间",
          key: "buyTime"
        },
        {
          title: "收入金额",
          key: "incomeMoney",
        },
        {
          title: "收入类型",
          key: "incomeType"
        },
        {
          title: "收入明细",
          key: "storeIncomeDesc"
        },
        {
          title: "到账时间",
          key: "incomeTime"
        }
      ],
      searchForm: {
        pageNumber: 1,
        pageSize: 10,
      },
      submitLoading: false,
    };
  },
  methods: {
    clearIpt () {
      this.searchForm.withdrawUser = "";
      this.searchForm.type = "";
    },

    changeSort () {

    },
    
    // 获取商品列表
    getList() {
      this.loading = true;
      this.postRequest("/storeIncome/getStoreIncomeList", this.searchForm).then(res=> {
        this.loading = false;
        if (res.success) {
          var arr = res.result.dataResult;
          for(let val of arr){
            for(let i in val){
              (val[i] === null) ? (val[i] = "-") : ""
            }
          }
          this.commodityData = res.result.dataResult;
          this.pageTotal = res.result.totalNumber
        } else {
          this.commodityData = [];
          this.pageTotal = 0;
        }
      })
    },
    // 切换页
    changePage(num) {
        this.searchForm.pageNumber = num
        this.getList()
    },
    // 切换每页显示条数
    changePageSize (num) {
        this.searchForm.pageSize = num;
        this.getList()
    },
  },
  created() {
    this.getList();
  }
};
</script>

<style>
.commodity-content {
  padding: 16px;
  background-color: #ffffff;
}
.itemInput {
  width: 160px;
}
.selected {
  width: 50%;
}
.imgModal {
  text-align: center;
}
.img {
  width: 50px;
  height: 50px;
}
.page{
        margin: 16px;
        overflow: hidden;
        text-align: right;
    }
.paygos{
  margin-top: 40px;
}
.paygo1{
  margin-top: -50px;
}
</style>